﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/chat/font_Icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="/chat/css/chat.css">
    <!--<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">-->
    <!--<link rel="stylesheet" href="/css/reset.css">-->
    <!--<link rel="stylesheet" href="/css/index.css">-->
</head>
<body onload="window.scrollTo(0,document.body.scrollHeight);">
<div class="actionSelect" style="display: none" id="deleteMessage">
    <ul>
        <li class="delete">删除</li>
        <li class="cancel">取消</li>
    </ul>
</div>
<div class="chatContainer">
    <!--<div class="chatBtn">
        <i class="iconfont icon-xiaoxi1"></i>
    </div>
    <div class="chat-message-num">10</div>-->
    <div class="chatBox" ref="chatBox">
        <div class="chatBox-head">

            <div class="chatBox-head-one">
                <a href="javascript:window.history.go(-1)">
                    <div class="chat-return" style="margin: 10px 10px 0 0;font-size: 14px">返回</div>
                </a>
                Conversations
                <div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div>
            </div>
            <div class="chatBox-head-two">
                <div class="chat-return" id="chat-return">返回</div>
                <div class="chat-people">
                    <div class="ChatInfoHead">
                        <img src="" alt="头像"/>
                    </div>
                    <div class="ChatInfoName">这是用户的名字，看看名字到底能有多长</div>
                </div>
                <div class="chat-close">关闭</div>
            </div>
        </div>
        <div class="chatBox-info">
            <div class="chatBox-list" ref="chatBoxlist">
                <div class="chat-list-people" data-aid="">
                    <div><img src="/img/user/head.jpg" alt="头像"/></div>
                    <div class="chat-name">
                        <p>欢迎来到骡窝窝</p>
                    </div>
                    <div class="message-num"></div>
                </div>
            </div>
            <div class="chatBox-kuang" ref="chatBoxkuang">
                <div class="chatBox-content">
                    <div class="chatBox-content-demo" id="chatBox-content-demo">

                        <div class="clearfloat" id="left">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="left">
                                <a>
                                    <div class="chat-avatars">

                                        <img src="" alt="头像"/>

                                    </div>
                                </a>
                                <div class="chat-message">
                                    给你看张图
                                    <img src="" alt="">
                                </div>
                            </div>
                        </div>

                        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="left">
                                <div class="chat-avatars"><img src="" alt="头像"/></div>
                                <div class="chat-message">
                                </div>
                            </div>
                        </div>

                        <div class="clearfloat" id="right">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="right">
                                <div class="chat-message" id="listen">
                                    嗯，适合做壁纸
                                </div>
                                <a>
                                    <div class="chat-avatars">

                                        <img src="" alt="头像"/>

                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chatBox-send">

                    <div class="div-textarea" id="speak" contenteditable="true"></div>
                    <div>
                        <button id="chat-biaoqing" class="btn-default-styles">
                            <i class="iconfont icon-biaoqing"></i>
                        </button>
                        <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
                            <form id="imgForm" action="/images" enctype="multipart/form-data" method="post">
                                <input type="file" accept="image/jpg,image/jpeg,image/png,image/gif"
                                       name="pic" id="inputImage" class="hidden">
                                <i class="iconfont icon-tuxiang"></i>
                            </form>
                        </label>
                        <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i>
                        </button>
                    </div>
                    <div class="biaoqing-photo">
                        <ul>
                            <li><span class='emoji-picker-image' style='background-position: -9px -18px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -40px -18px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -71px -18px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -102px -18px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -133px -18px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -164px -18px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -9px -52px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -40px -52px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -71px -52px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -102px -52px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -133px -52px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -164px -52px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -9px -86px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -40px -86px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -71px -86px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -102px -86px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -133px -86px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -164px -86px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -9px -120px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -40px -120px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -71px -120px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -102px -120px;'></span>
                            </li>
                            <li><span class='emoji-picker-image' style='background-position: -133px -120px;'></span>
                            </li>
                            <li><span class='emoji-picker-image' style='background-position: -164px -120px;'></span>
                            </li>
                            <li><span class='emoji-picker-image' style='background-position: -9px -154px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -40px -154px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -71px -154px;'></span></li>
                            <li><span class='emoji-picker-image' style='background-position: -102px -154px;'></span>
                            </li>
                            <li><span class='emoji-picker-image' style='background-position: -133px -154px;'></span>
                            </li>
                            <li><span class='emoji-picker-image' style='background-position: -164px -154px;'></span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>
</div>


<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/plugins/jrender/jrender.js"></script>
<script src="/js/plugins/jquery-form/jquery.form.js"></script>

<script>
    $(function () {
        //获取当前登陆者的信息
        var user = JSON.parse(sessionStorage.getItem("user"));
        var copy = $(".chatBox-list .chat-list-people:first").clone(true);
        var authorId = getParams().authorId;
        var leftCopy = $("#left").clone(true);
        var rightCopy = $("#right").clone(true);
        var author;
        var friendId;
        var currentPage = 1;
        var pages;
        $(".chatBox-list").html("");

        //查询当前作者的基本信息
        if (authorId) {
            $.get("/privateMessages", {userId: user.id, friendId: authorId}, function (data) {

                $.get("/users", {id: authorId}, function (ele) {
                    console.log(data);
                    if (data.total < 10) {
                        if (ele.success) {
                            $(copy).attr("data-aid", authorId);
                            $(copy).find("img").attr("src", ele.data.headImgUrl);
                            $(copy).find("p").html(ele.data.nickName);
                            $(copy).find(".message-num").detach();
                            $(copy).prependTo(".chatBox-list")
                        }
                    }
                    author = ele.data;
                });

            })
        }
        //查询所有的对话者
        $.get("/privateMessages/" + user.id, {status: 1}, function (data) {
            $(".chatBox-list").html("");
            $.each(data, function (index, ele) {
                var copy2 = $(copy).clone(true);
                $(copy2).attr("data-aid", ele.friend_id);
                $(copy2).find("img").attr("src", ele.headImgUrl);
                $(copy2).find("p").html(ele.nickName);
                if (ele.num) {
                    $(copy2).find(".message-num").html(ele.num);
                } else {
                    $(copy2).find(".message-num").detach();
                }
                if (ele.friend_id == authorId) {
                    $(copy2).prependTo(".chatBox-list");
                } else {
                    $(copy2).appendTo(".chatBox-list");
                }
            })
        })

        screenFuc();

        function screenFuc() {
            var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
            //屏幕小于768px时候,布局change
            var winWidth = $(window).innerWidth();
            if (winWidth <= 768) {
                var totalHeight = $(window).height(); //页面整体高度
                $(".chatBox-info").css("height", totalHeight - topHeight);
                var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
                //中间内容高度
                $(".chatBox-content").css("height", infoHeight - 46);
                $(".chatBox-content-demo").css("height", infoHeight - 46);

                $(".chatBox-list").css("height", totalHeight - topHeight);
                $(".chatBox-kuang").css("height", totalHeight - topHeight);
                $(".div-textarea").css("width", winWidth - 106);
            } else {
                $(".chatBox-info").css("height", 495);
                $(".chatBox-content").css("height", 448);
                $(".chatBox-content-demo").css("height", 448);
                $(".chatBox-list").css("height", 495);
                $(".chatBox-kuang").css("height", 495);
                $(".div-textarea").css("width", 260);
            }
        }

        (window.onresize = function () {
            screenFuc();
        })();
        //未读信息数量为空时
        var totalNum = $(".chat-message-num").html();
        if (totalNum == "") {
            $(".chat-message-num").css("padding", 0);
        }
        $(".message-num").each(function () {
            var wdNum = $(this).html();
            if (wdNum == "") {
                $(this).css("padding", 0);
            }
        });


        //打开/关闭聊天框
        $(".chatBtn").click(function () {
            $(".chatBox").toggle(10);
        })
        $(".chat-close").click(function () {
            // $(".chatBox").toggle(10);
            window.location.href = "/userProfiles.html?authorId=" + authorId;
        })
        //点击进入聊天界面
        $(".chatBox-list").on("click", ".chat-list-people", function () {
            var n = $(this).index();
            friendId = $(this).data("aid");
            authorId = friendId;
            //查询被点击者的信息
            $.get("/users", {id: friendId}, function (ele) {
                // if (data.pageNum == 0) {
                //     if (data.success) {
                //         $(copy).attr("data-aid", authorId);
                //         $(copy).find("img").attr("src", ele.data.headImgUrl);
                //         $(copy).find("p").html(ele.data.nickName);
                //         $(copy).find(".message-num").detach();
                //         $(copy).prependTo(".chatBox-list")
                //     }
                // }
                author = ele.data;
            });
            var headImgUrl = $(this).find("img").attr("src");
            $("#chatBox-content-demo").html("");
            $(".chatBox-head-one").toggle();
            $(".chatBox-head-two").toggle();
            $(".chatBox-list").fadeToggle();
            $(".chatBox-kuang").fadeToggle();

            //传名字
            $(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());

            //传头像
            $(".ChatInfoHead>img").attr("src", $(this).children().eq(0).children("img").attr("src"));

            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
            //发送ajax请求查询聊天记录
            $.get("/privateMessages", {userId: user.id, friendId: friendId}, function (data) {
                console.log(data);
                pages = data.pages;
                $.each(data.list, function (index, item) {
                    var leftCopy2 = leftCopy.clone(true);
                    var rightCopy2 = rightCopy.clone(true);
                    var str = item.messageContent;
                    var newStr = str.substr(str.length - 2, 2);
                    console.log(newStr);
                    if (item.userId == item.senderId) {
                        rightCopy2.find("small").html(item.sendTime);
                        rightCopy2.find("a").attr("href", "/userProfiles.html?authorId=" + user.id);
                        rightCopy2.find(".chat-avatars img").attr("src", user.headImgUrl);
                        if (item.messageImageUrl) {
                            rightCopy2.find(".chat-message").html($("<img src='" + item.messageImageUrl + "' alt='图片加载失败'>"));
                        } else if (newStr == "px") {
                            var bq = "<span class='emoji-picker-image' style='background-position:" + str + "'></span>";
                            rightCopy2.find(".chat-message").html(bq);
                        } else {
                            rightCopy2.find(".chat-message").html(item.messageContent);
                        }
                        $(".chatBox-content-demo").prepend(rightCopy2);
                    } else {
                        leftCopy2.find("small").html(item.sendTime);
                        leftCopy2.find("a").attr("href", "/userProfiles.html?authorId=" + user.id);
                        leftCopy2.find(".chat-avatars img").attr("src", headImgUrl);
                        if (item.messageImageUrl) {
                            leftCopy2.find(".chat-message").html($("<img src='" + item.messageImageUrl + "' alt='图片加载失败'>"));
                        } else if (newStr == "px") {
                            var bq = "<span class='emoji-picker-image' style='background-position:" + str + "'></span>";
                            leftCopy2.find(".chat-message").html(bq);
                        } else {
                            leftCopy2.find(".chat-message").html(item.messageContent);
                        }
                        $(".chatBox-content-demo").prepend(leftCopy2);
                    }

                })

            })
            //将滚动条滚动到最低端
            window.scrollTo(0, document.body.scrollHeight);

            //进入聊天界面后和当前的对话者所有未读消息全部设为已读
            $.ajax({
                type: "PUT",
                url: "/privateMessages/" + user.id,
                data: {friendId: friendId, status: 2},
                success: function (data) {

                }
            })

        })
        $(window).scroll(function () {
            console.log(1);
            if (screenTop < 10) {

                if (currentPage < pages) {
                    currentPage++;
                    //发送ajax请求查询聊天记录
                    $.get("/privateMessages", {
                        userId: user.id,
                        friendId: friendId,
                        currentPage: currentPage
                    }, function (data) {
                        console.log(data);
                        pages = data.pages;
                        $.each(data.list, function (index, item) {
                            var leftCopy2 = leftCopy.clone(true);
                            var rightCopy2 = rightCopy.clone(true);
                            if (item.userId == item.senderId) {
                                rightCopy2.find("small").html(item.sendTime);
                                rightCopy2.find(".chat-avatars img").attr("src", user.headImgUrl);
                                if (item.messageImageUrl) {
                                    rightCopy2.find(".chat-message").html($("<img src='" + item.messageImageUrl + "' alt='图片加载失败'>"));
                                } else {
                                    rightCopy2.find(".chat-message").html(item.messageContent);
                                }
                                $(".chatBox-content-demo").prepend(rightCopy2);
                            } else {
                                leftCopy2.find("small").html(item.sendTime);
                                leftCopy2.find(".chat-avatars img").attr("src", headImgUrl);
                                if (item.messageImageUrl) {
                                    leftCopy2.find(".chat-message").html($("<img src='" + item.messageImageUrl + "' alt='图片加载失败'>"));
                                } else {
                                    leftCopy2.find(".chat-message").html(item.messageContent);
                                }
                                $(".chatBox-content-demo").prepend(leftCopy2);
                            }

                        })

                    })
                }
            }
        })
        //进聊天页面
        // $(".chat-list-people").each(function () {
        //     $(this).click(function () {
        //         var n = $(this).index();
        //         $(".chatBox-head-one").toggle();
        //         $(".chatBox-head-two").toggle();
        //         $(".chatBox-list").fadeToggle();
        //         $(".chatBox-kuang").fadeToggle();
        //
        //         //传名字
        //         $(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());
        //
        //         //传头像
        //         $(".ChatInfoHead>img").attr("src", $(this).children().eq(0).children("img").attr("src"));
        //
        //         //聊天框默认最底部
        //         $(document).ready(function () {
        //             $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
        //         });
        //     })
        // });

        //返回列表
        $("#chat-return").click(function () {
            //与当前对话者的未读消息全部设为已读
            $.ajax({
                type: "PUT",
                url: "/privateMessages/" + user.id,
                data: {friendId: friendId, status: 2},
                success: function (data) {

                }
            })
            // location.reload();
            $(".chatBox-head-one").toggle(1);
            $(".chatBox-head-two").toggle(1);
            $(".chatBox-list").fadeToggle(1);
            $(".chatBox-kuang").fadeToggle(1);
            // $(".chatBox-list").html("");
            // $.get("/privateMessages/" + user.id, {status: 1}, function (data) {
            //     $(".chatBox-list").html("");
            //     $.each(data, function (index, ele) {
            //         var copy2 = $(copy).clone(true);
            //         $(copy2).attr("data-aid", ele.friend_id);
            //         $(copy2).find(".chat-avatars img").attr("src", ele.headImgUrl);
            //         $(copy2).find("p").html(ele.nickName);
            //         if (ele.num) {
            //             $(copy2).find(".message-num").html(ele.num);
            //         } else {
            //             $(copy2).find(".message-num").detach();
            //         }
            //         if (ele.friend_id == authorId) {
            //             $(copy2).prependTo(".chatBox-list");
            //         } else {
            //             $(copy2).appendTo(".chatBox-list");
            //         }
            //     })
            // })
            location.reload();

        });
        //上传图片
        $("#chat-tuxiang").change(function () {
            $("#imgForm").ajaxSubmit(function (data) {
                if (data.status == 1) {
                    var url = data.url;
                    //将输入框的信息传递给socket
                    websocket.send('{"userId":' + user.id + ',"messageContent":"' + "" +
                        '","messageType":' + 1 + ',"friendId":' + friendId + ',"senderId":' + user.id +
                        ',"receiverId":' + friendId + ',"sendTime":"' + formatDate(new Date().getTime()) +
                        '","status":' + 2 + ',"id":' + 1 + ',"messageImageUrl":"' + url + '"}');
                    rightCopy.find("small").html(formatDate(new Date().getTime()));
                    rightCopy.find(".chat-avatars img").attr("src", user.headImgUrl);
                    rightCopy.find(".chat-message").html($("<img src='" + url + "' alt='图片加载失败'>"));
                    var rightCopy2 = rightCopy.clone(true);
                    $(".chatBox-content-demo").append(rightCopy2);
                }
            })
        })
        // 发送信息
        $("#chat-fasong").click(function () {
            var textContent = $(".div-textarea").html();
            //将输入框的信息传递给socket
            websocket.send('{"userId":' + user.id + ',"messageContent":"' + textContent +
                '","messageType":' + 1 + ',"friendId":' + friendId + ',"senderId":' + user.id +
                ',"receiverId":' + friendId + ',"sendTime":"' + formatDate(new Date().getTime()) +
                '","status":' + 2 + ',"id":' + 1 + ',"messageImageUrl":"' + "" + '"}');
            if (textContent != "") {
                // $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                //     "<div class=\"author-name\"><small class=\"chat-date\">" + formatDate(new Date().getTime()) + "</small> </div> " +
                //     "<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
                //     "<div class=\"chat-avatars\"><img src='" + user.headImgUrl + "' alt=\"头像\" /></div> </div> </div>");
                rightCopy.find("small").html(formatDate(new Date().getTime()));
                rightCopy.find("a").attr("href", "/userProfiles.html?authorId=" + user.id);
                rightCopy.find(".chat-avatars img").attr("src", user.headImgUrl);
                rightCopy.find(".chat-message").html(textContent);
                var rightCopy2 = rightCopy.clone(true);
                $(".chatBox-content-demo").append(rightCopy2);
                //发送后清空输入框
                $(".div-textarea").html("");
                //聊天框默认最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
            }
            //如果使用者和对话者正在进行对话,所有消息设为已读
            $.ajax({
                type: "PUT",
                url: "/privateMessages/" + user.id,
                data: {friendId: friendId, status: 2},
                success: function (data) {

                }
            })
            //将滚动条滚动到最低端
            window.scrollTo(0, document.body.scrollHeight);
        });

        var IP = sessionStorage.getItem("IP");
        console.log(IP);
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://" + IP + "/websocket");
        }
        else {
            alert('当前浏览器 Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            // setMessageInnerHTML("WebSocket连接发生错误");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            // setMessageInnerHTML("WebSocket连接成功");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            setMessageInnerHTML(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            // setMessageInnerHTML("WebSocket连接关闭");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        }

        // window.setInterval(function(){ //每隔5秒钟发送一次心跳，避免websocket连接因超时而自动断开
        //     var ping = {"type":"ping"};
        //     websocket.send(JSON.stringify(ping));
        // },5000);

        //将消息显示在网页上


        function setMessageInnerHTML(innerHTML) {

            // document.getElementById('message').innerHTML += innerHTML + '<br/>';
            var data = JSON.parse(innerHTML);
            if (user.id != data.senderId && authorId == friendId) {
                // $(leftEle).find(".chat-message").html(data.msg).appendTo("#chatBox-content-demo");
                // $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                //     "<div class=\"author-name\"><small class=\"chat-date\">" + formatDate(new Date().getTime()) + "</small> </div> " +
                //     "<div class=\"chat-avatars\"><img src='" + author.headImgUrl + "' alt=\"头像\" /></div>" +
                //     "<div class=\"left\"> <div class=\"chat-message\"> " + data.msg + " </div> " +
                //     "</div> </div>");
                var str = data.messageContent;
                var newStr = str.substr(str.length - 2, 2);
                console.log(newStr);
                leftCopy.find("small").html(formatDate(new Date().getTime()));
                leftCopy.find(".chat-avatars img").attr("src", author.headImgUrl);
                leftCopy.find("a").attr("href", "/userProfiles.html?authorId=" + user.id);
                if (data.messageImageUrl) {
                    leftCopy.find(".chat-message").html($("<img src='" + data.messageImageUrl + "' alt='图片加载失败'>"));
                } else if (newStr == "px") {
                    var bq = "<span class='emoji-picker-image' style='background-position:" + str + "'></span>";
                    leftCopy.find(".chat-message").html(bq);
                } else {
                    leftCopy.find(".chat-message").html(data.messageContent);
                }
                var leftCopy2 = leftCopy.clone(true);
                $(".chatBox-content-demo").append(leftCopy2);
                //将滚动条滚动到最低端
                window.scrollTo(0, document.body.scrollHeight);

                // setInterval(function(){
                //     $(".add_blank").hide();
                // },3000);
                playSound();
            }

        }

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }

        // $("#clearfloat").mousedown(function() {
        //     timeout = setTimeout(function() {
        //         $("#mydiv").text("in");
        //     }, 2000);
        // });
        // $(".chatBox-content").on("click", function () {
        //     alert($(this));
        // })

        var myVar;
        var deleteEle;
        var deleteItem;
        // 当鼠标移动时,输入的文字时,使用者的所有信息状态设置为已读
        $(".chatContainer").on("mousedown", ".chat-message", function () {
            var childTop = this.getBoundingClientRect().top;
            var childLeft = this.getBoundingClientRect().left;
            deleteItem = $(this).parent("div").parent("div");
            deleteEle = $(this).parent("div").parent("div").find("small").html();
            console.log(deleteEle);
            myVar = setTimeout(function () {
                $("#deleteMessage").css("top", childTop - 70).css("left", childLeft - 50).css("display", "block");

            }, 300);
        })
        $(".chatContainer").on("mouseup", ".chat-message", function () {
            clearTimeout(myVar);
        })
        // $("html").click(function () {
        //     if ($(".actionSelect").css("display") == "block") {
        //         $(".actionSelect").css("display", "none");
        //         // feedbackAction();
        //     }
        // });
        $("#deleteMessage").on("click", ".delete", function () {
            // $(".actionSelect").css("display", "none");
            var str = deleteEle.replace(/-/, "/");
            var deleteEleTime = new Date(str);
            console.log(deleteEleTime);
            $.ajax({
                type: "PUT",
                url: "/privateMessages/" + user.id,
                data: {friendId: friendId, status: 3, sendTime: deleteEleTime},
                success: function (data) {

                }
            })
            $("#deleteMessage").css("display", "none");
            $(deleteItem).detach();
        })
        $("#deleteMessage").on("click", ".cancel", function () {
            $("#deleteMessage").css("display", "none");
        })

        var playSound = function () {
            var borswer = window.navigator.userAgent.toLowerCase();
            if (borswer.indexOf("ie") >= 0) { //
                // IE内核浏览器
                var strEmbed = '<embed name="embedPlay" src="/chat/img/Ring.wav" autostart="true" hidden="true" loop="false"></embed>';
                if ($("body").find("embed").length <= 0) $("body").append(strEmbed);
                var embed = document.embedPlay;
                //浏览器不支持 audion，则使用 embed 播放 embed.volume = 100; //embed.play();这个不需要
            } else { //非IE内核浏览器
                var strAudio = "<audio id='audioPlay' src='/chat/img/Ring.wav' hidden='true'></audio>";
                if ($("#audioPlay").length <= 0) {
                    $("body").append(strAudio);
                }
                var audio = document.getElementById("audioPlay");
                audio
                audio.play();
            }
        }
        //      发送表情
        $("#chat-biaoqing").click(function () {

            $(".biaoqing-photo").toggle();
            // $(".biaoqing-photo").css("top", 1000).css("left", 50);
        });
        $(document).click(function () {
            $(".biaoqing-photo").css("display", "none");
        });
        $("#chat-biaoqing").click(function (event) {
            event.stopPropagation();//阻止事件
        });

        $(".emoji-picker-image").each(function () {
            $(this).click(function () {
                var bq = $(this).parent().html();
                var style = $(bq).css("background-position");
                console.log(style)

                //将输入框的信息传递给socket
                websocket.send('{"userId":' + user.id + ',"messageContent":"' + style +
                    '","messageType":' + 1 + ',"friendId":' + friendId + ',"senderId":' + user.id +
                    ',"receiverId":' + friendId + ',"sendTime":"' + formatDate(new Date().getTime()) +
                    '","status":' + 2 + ',"id":' + 1 + ',"messageImageUrl":"' + "" + '"}');
                rightCopy.find("small").html(formatDate(new Date().getTime()));
                rightCopy.find(".chat-avatars img").attr("src", user.headImgUrl);
                rightCopy.find(".chat-message").html(bq);
                var rightCopy2 = rightCopy.clone(true);
                $(".chatBox-content-demo").append(rightCopy2);
                //发送后关闭表情框
                $(".biaoqing-photo").toggle();
                //聊天框默认最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
            })
        });

    })


</script>
</body>
</html>
